<template>
    <div class="container">
        <van-form @submit="onSubmit">
            <div class="qiye-info">
                <div class="title">人才信息</div>
                <van-cell-group inset>
                    <van-field
                    v-model="form.talentCode"
                    name="talentCode"
                    label="人才编码："
                    placeholder="请输入人才编码"
                    :rules="[{ required: true, message: '请输入人才编码' }]"
                    />
                    <van-field
                    v-model="form.name"
                    name="name"
                    label="姓名："
                    placeholder="请输入"
                    :rules="[{ required: true, message: '请输入' }]"
                    />
                    <van-field
                    v-model="sexValue"
                    is-link
                    readonly
                    label="性别："
                    placeholder="请选择性别"
                    @click="showPicker1 = true"
                    :rules="[{ required: true, message: '请选择性别' }]"
                  />
                  <van-popup v-model:show="showPicker1" round position="bottom">
                    <van-picker
                      :columns="sexList"
                      @cancel="showPicker1 = false"
                      @confirm="onConfirm1"
                    />
                  </van-popup>

                    <van-field
                    v-model="form.nativePlace"
                    name=""
                    label="籍贯："
                    placeholder="请输入籍贯"
                    :rules="[{ required: true, message: '请输入籍贯' }]"
                    />

                    <van-field
                    v-model="form.phone"
                    name=""
                    label="联系电话："
                    placeholder="请输入联系电话"
                    :rules="[{ required: true, message: '请输入联系电话' }]"
                    />
                    
                    <van-field
                    v-model="form.residentialAddress"
                    name="residentialAddress"
                    label="家庭住址："
                    placeholder="请输入家庭住址"
                    :rules="[{ required: true, message: '请输入家庭住址' }]"
                    />
                    <van-field
                    v-model="levelValue"
                    is-link
                    readonly
                    label="人才等级："
                    placeholder="请选择人才等级"
                    @click="showPicker8 = true"
                    :rules="[{ required: true, message: '请选择人才等级' }]"
                  />
                  <van-popup v-model:show="showPicker8" round position="bottom">
                    <van-picker
                      :columns="levelList"
                      @cancel="showPicker8 = false"
                      @confirm="onConfirm8"
                    />
                  </van-popup>
                    <van-field
                    v-model="form.occupation"
                    name="occupation"
                    label="现职务："
                    placeholder="请输入现职务"
                    :rules="[{ required: true, message: '请输入现职务' }]"
                    />

                    <van-field
                    v-model="zcValue"
                    is-link
                    readonly
                    label="职称："
                    placeholder="请选择职称"
                    @click="showPicker2 = true"
                    :rules="[{ required: true, message: '请选择职称' }]"
                  />
                  <van-popup v-model:show="showPicker2" round position="bottom">
                    <van-picker
                      :columns="zcList"
                      @cancel="showPicker2 = false"
                      @confirm="onConfirm2"
                    />
                  </van-popup>

                  <van-field
                    v-model="xlValue"
                    is-link
                    readonly
                    label="学历："
                    placeholder="请选择学历"
                    @click="showPicker3 = true"
                    :rules="[{ required: true, message: '请选择学历' }]"
                  />
                  <van-popup v-model:show="showPicker3" round position="bottom">
                    <van-picker
                      :columns="xlList"
                      @cancel="showPicker3 = false"
                      @confirm="onConfirm3"
                    />
                  </van-popup>

                  <van-field
                    v-model="xwValue"
                    is-link
                    readonly
                    label="学位："
                    placeholder="请选择学位"
                    @click="showPicker4 = true"
                    :rules="[{ required: true, message: '请选择学位' }]"
                  />
                  <van-popup v-model:show="showPicker4" round position="bottom">
                    <van-picker
                      :columns="xwList"
                      @cancel="showPicker4 = false"
                      @confirm="onConfirm4"
                    />
                  </van-popup>

                  <van-field
                    v-model="politicalValue"
                    is-link
                    readonly
                    label="政治面貌："
                    placeholder="请选择政治面貌"
                    @click="showPicker5 = true"
                    :rules="[{ required: true, message: '请选择政治面貌' }]"
                  />
                  <van-popup v-model:show="showPicker5" round position="bottom">
                    <van-picker
                      :columns="politicalList"
                      @cancel="showPicker5 = false"
                      @confirm="onConfirm5"
                    />
                  </van-popup>
                  <van-cell title="合同时间：" :value="form.contractStart" @click="showStart = true" />
                  <van-calendar v-model:show="showStart" @confirm="onConfirmStart" :rules="[{ required: true, message: '请选择合同时间' }]" />
                  
                  <van-cell title="到期时间：" :value="form.contractEnd" @click="showEnd = true" />
                  <van-calendar v-model:show="showEnd" @confirm="onConfirmEnd" :rules="[{ required: true, message: '请选择到期时间' }]" />
                  
                  <van-field
                    v-model="rdValue"
                    is-link
                    readonly
                    label="是否人大代表："
                    placeholder="请选择是否人大代表"
                    @click="showPicker6 = true"
                    :rules="[{ required: true, message: '请选择是否人大代表' }]"
                  />
                  <van-popup v-model:show="showPicker6" round position="bottom">
                    <van-picker
                      :columns="isRdList"
                      @cancel="showPicker6 = false"
                      @confirm="onConfirm6"
                    />
                  </van-popup>

                  <van-field
                    v-model="isZxValue"
                    is-link
                    readonly
                    label="是否政协委员："
                    placeholder="请选择是否政协委员"
                    @click="showPicker7 = true"
                    :rules="[{ required: true, message: '请选择是否政协委员' }]"
                  />
                  <van-popup v-model:show="showPicker7" round position="bottom">
                    <van-picker
                      :columns="isZxList"
                      @cancel="showPicker7 = false"
                      @confirm="onConfirm7"
                    />
                  </van-popup>

                </van-cell-group>
            </div>
            <div class="qiye-info2">
              <div class="title">工作经历</div>
              <van-cell-group inset>
                <van-cell title="开始时间：" :value="form2.startDate" @click="showStartDate = true" />
                <van-calendar v-model:show="showStartDate" @confirm="onConfirmStartDate" :rules="[{ required: true, message: '请选择开始时间' }]" />
                <van-cell title="结束时间：" :value="form2.endDate" @click="showEndDate = true" />
                <van-calendar v-model:show="showEndDate" @confirm="onConfirmEndDate" :rules="[{ required: true, message: '请选择结束时间' }]" />
                  <van-field
                  v-model="form2.companyName"
                  name="companyName"
                  label="单位："
                  placeholder="请输入单位名称"
                  :rules="[{ required: true, message: '请输入单位名称' }]"
                  />
                  <van-field
                  v-model="form2.job"
                  name="job"
                  label="职务："
                  placeholder="请输入职务"
                  :rules="[{ required: true, message: '请输入职务' }]"
                  />
                  
              </van-cell-group>
            </div>
            <div class="qita">
                <div class="title2">其他</div>
                <div class="title3">填写其它信息备注：</div>
                <van-field
                class="remark"
                type="textarea"
                :rows="3"
                v-model="form2.remark"
                name="remark"
                label=""
                placeholder=""
                />
            </div>
          <div class="addbtn">
            <van-button color='#1052CC' block type="primary" native-type="submit">
              确定
            </van-button>
          </div>
        </van-form>
    </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { onMounted } from 'vue'
import { showToast } from 'vant';
import { getDictSelect, getTalentDetail, getWorkHistoryList, editTalentPerson, editWorkHistory,creatTalentPerson,creatWorkHistory } from '@/api/company';

const router = useRouter()
const route = useRoute();

// async function getDetail() {
//   const id = route.query.personId || '';
//   if(id){
//     const { code, data } = await getTalentDetail(id);
//     if(code === 200) {
//     form.talentCode = data.talentCode
//     sexId.value = data.sex
//     let picksex = []
//       picksex = sexList.filter(s =>{
//         return s.value == sexId.value
//       })
//     sexValue.value = picksex[0].text
//     form.name = data.name
//     form.companyId = data.companyId
//     form.nativePlace = data.nativePlace
//     form.phone = data.phone
//     form.residentialAddress = data.residentialAddress
//     form.occupation = data.occupation
//     form.contractStart = data.contractStart
//     form.contractEnd = data.contractEnd
//     zcId.value = data.postTitle
//     let pickzc = []
//       pickzc = zcList.filter(s =>{
//         return s.value == zcId.value
//       })
//     zcValue.value = pickzc[0].text

//     xlId.value = data.eduBackground
//     let pickxl = []
//       pickxl = xlList.filter(s =>{
//         return s.value == xlId.value
//       })
//     xlValue.value = pickxl[0].text

//     xwId.value = data.eduDegree
//     let pickxw = []
//       pickxw = xwList.filter(s =>{
//         return s.value == xwId.value
//       })
//     xwValue.value = pickxw[0].text

//     politicalId.value = data.political
//     let pickpolitical = []
//       pickpolitical = politicalList.filter(s =>{
//         return s.value == politicalId.value
//       })
//     politicalValue.value = pickpolitical[0].text

//     rdId.value = data.rd
//     let pickRd = []
//       pickRd = isRdList.filter(s =>{
//         return s.value == rdId.value
//       })
//     rdValue.value = pickRd[0].text

//     isZxId.value = data.zx
//     let pickZx = []
//       pickZx = isZxList.filter(s =>{
//         return s.value == isZxId.value
//       })
//     isZxValue.value = pickZx[0].text
//     }
//   }
// }
// const getWorkHistory = async () => {
//   const personId = route.query.personId || '';
//   if(personId){
//     const { code, data } = await getWorkHistoryList({
//       personId: route.query.personId || ''
//     });
//     if (code === 200 && data.list.length) {
//       form2.companyName = data.list[0].companyName
//       form2.job = data.list[0].job
//       form2.startDate = data.list[0].startDate
//       form2.endDate = data.list[0].endDate
//       form2.remark = data.list[0].remark
//       form2.historyId = data.list[0].historyId
//       form2.personId = data.list[0].personId
//     }
//   }
// }


const sexList = [];
const getSexList = () => {
  getDictSelect('sex').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        sexList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
}
const showPicker1 = ref(false);
const sexId = ref('')
const sexValue = ref('')
const onConfirm1 = ({ selectedOptions }) => {
  showPicker1.value = false;
  sexValue.value = selectedOptions[0]?.text;
  sexId.value = selectedOptions[0]?.value;
};

const zcList = [];
const getZcList = () => {
  getDictSelect('talent_person_post_title').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        zcList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
}
const showPicker2 = ref(false);
const zcId = ref('')
const zcValue = ref('')
const onConfirm2 = ({ selectedOptions }) => {
  showPicker2.value = false;
  zcValue.value = selectedOptions[0]?.text;
  zcId.value = selectedOptions[0]?.value;
};

const xlList = [];
const getXlList = () => {
  getDictSelect('talent_person_edu').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        xlList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
}
const showPicker3 = ref(false);
const xlId = ref('')
const xlValue = ref('')
const onConfirm3 = ({ selectedOptions }) => {
  showPicker3.value = false;
  xlValue.value = selectedOptions[0]?.text;
  xlId.value = selectedOptions[0]?.value;
};

const xwList = [];
const getXwList = () => {
  getDictSelect('talent_person_degree').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        xwList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
}
const showPicker4 = ref(false);
const xwId = ref('')
const xwValue = ref('')
const onConfirm4 = ({ selectedOptions }) => {
  showPicker4.value = false;
  xwValue.value = selectedOptions[0]?.text;
  xwId.value = selectedOptions[0]?.value;
};

const politicalList = [];
const getPoliticalListList = () => {
  getDictSelect('talent_person_political').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        politicalList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
}
const showPicker5 = ref(false);
const politicalId = ref('')
const politicalValue = ref('')
const onConfirm5 = ({ selectedOptions }) => {
  showPicker5.value = false;
  politicalValue.value = selectedOptions[0]?.text;
  politicalId.value = selectedOptions[0]?.value;
};


const isRdList = [
  { text: '是', value: '1' },
  { text: '否', value: '0' },
];
const showPicker6 = ref(false);
const rdId = ref('')
const rdValue = ref('')
const onConfirm6 = ({ selectedOptions }) => {
  showPicker6.value = false;
  rdValue.value = selectedOptions[0]?.text;
  rdId.value = selectedOptions[0]?.value;
};


const isZxList = [
  { text: '是', value: '1' },
  { text: '否', value: '0' },
];
const showPicker7 = ref(false);
const isZxId = ref('')
const isZxValue = ref('')
const onConfirm7 = ({ selectedOptions }) => {
  showPicker7.value = false;
  isZxValue.value = selectedOptions[0]?.text;
  isZxId.value = selectedOptions[0]?.value;
};


const levelList = [];
const getLevelList = () => {
  getDictSelect('talent_person_level').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        levelList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
}
const showPicker8 = ref(false);
const levelId = ref('')
const levelValue = ref('')
const onConfirm8 = ({ selectedOptions }) => {
  showPicker8.value = false;
  levelValue.value = selectedOptions[0]?.text;
  levelId.value = selectedOptions[0]?.value;
};

const date = ref('');
const showStart = ref(false);
const formatDate = (date) => `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
const onConfirmStart = (value) => {
  showStart.value = false;
  form.contractStart = formatDate(value);
};


const date2 = ref('');
const showEnd = ref(false);
const onConfirmEnd = (value) => {
  showEnd.value = false;
  form.contractEnd = formatDate(value);
};

const date3 = ref('');
const showStartDate = ref(false);
const onConfirmStartDate = (value) => {
  showStartDate.value = false;
  form2.startDate = formatDate(value);
};

const date4 = ref('');
const showEndDate = ref(false);
const onConfirmEndDate = (value) => {
  showEndDate.value = false;
  form2.endDate = formatDate(value);
};

const form = reactive({
  talentCode: '',
  name: '',
  nativePlace: '',
  residentialAddress: '',
  occupation: '',
  contractStart: '',
  contractEnd: '',
  phone: '',
  companyId: localStorage.getItem('companyId'),
})
const form1Submit = () => {
  let { companyId,talentCode, name, nativePlace,phone,residentialAddress,occupation,contractStart,contractEnd} = form;
  const params = {
    companyId,
    talentCode,
    name,
    sex: sexId.value,
    nativePlace,
    phone,
    residentialAddress,
    occupation,
    contractStart,
    contractEnd,
    postTitle: zcId.value,
    eduBackground: xlId.value,
    eduDegree: xwId.value,
    political: politicalId.value,
    rd: rdId.value,
    zx: isZxId.value,
    personId: route.query.personId,
  }
  creatTalentPerson(params).then((res) => {
    console.log('editTalentPerson:',res);
    const {code,data} = res
    if (code === 200) {
      console.log('人才信息创建成功');
      localStorage.setItem('personId', data.personInfo.personId)
      form2Submit()
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
//   const pId = route.query.personId || '';
//   if(pId){
//     editTalentPerson(params).then((res) => {
//     console.log('editTalentPerson:',res);
//     if (res.code === 200) {
//       // showToast(res.msg)
//       console.log('人才信息更新成功');
//       form2Submit()
//     } else {
//       showToast(res.msg)
//     }
//   }).catch((err) => {
//     console.log(err)
//   })
// }else{
//   creatTalentPerson(params).then((res) => {
//     console.log('editTalentPerson:',res);
//     const {code,data} = res
//     if (code === 200) {
//       console.log('人才信息创建成功');
//       localStorage.setItem('personId', data.personInfo.personId)
//       form2Submit()
//     } else {
//       showToast(res.msg)
//     }
//   }).catch((err) => {
//     console.log(err)
//   })
// }
}
  

const form2 = reactive({
  startDate: '',
  endDate: '',
  companyName: '',
  job: '',
  remark: '',
  historyId: '',
  personId: ''
})
const form2Submit = () =>{
  let {startDate, endDate,companyName,job,historyId,remark,personId} = form2;
  const params2 = {
    startDate,
    endDate,
    companyName,
    job,
    remark,
    historyId,
    personId
  }
  params2.personId = localStorage.getItem('personId')
  creatWorkHistory(params2).then((res) => {
    if (res.code === 200) {
      console.log('工作经历创建成功');
      showToast(res.msg)
      router.push({ path: '/CompanyInfo', query: { status: '1' }});
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
//   const perId = route.query.personId || '';
//   if(perId){
//     editWorkHistory(params2).then((res) => {
//     console.log('editWorkHistoryRes:',res);
//     if (res.code === 200) {
//       console.log('工作经历更新成功');
//       showToast(res.msg)
//       router.push({ path: '/CompanyInfo', query: { status: '1' }});
//     } else {
//       showToast(res.msg)
//     }
//   }).catch((err) => {
//     console.log(err)
//   })
// }else{
//   params2.personId = localStorage.getItem('personId')
//   creatWorkHistory(params2).then((res) => {
//     if (res.code === 200) {
//       console.log('工作经历创建成功');
//       showToast(res.msg)
//       router.push({ path: '/CompanyInfo', query: { status: '1' }});
//     } else {
//       showToast(res.msg)
//     }
//   }).catch((err) => {
//     console.log(err)
//   })
// }
}

const onSubmit = () => {
  form1Submit()
}

onMounted(() => {
  getSexList()
  getZcList()
  getXlList()
  getXwList()
  getPoliticalListList()
  getLevelList()
  // setTimeout(()=>{
  //     getDetail()
  //     getWorkHistory()
  //   },1000)
})
</script>
 

<style lang="scss" scoped>
.container {
  background: #f9f9f9;
  overflow: hidden;
  margin-bottom: 45px;
  padding: 0.9rem 1.3rem;
}
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
}
.addbtn{
  position: fixed;
  bottom: 2rem;
  width: 92%;
  left: 4%;
}
.van-form{
  padding: 1.4rem 0 0 0;
}
.van-cell-group{
  background: #fff;
}
.van-field{
 border-bottom: 1px solid #E0E0E4;
 padding: 2rem 0 1.6rem;
}
.title{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem 1.2rem;
}
.qiye-info,.qiye-info2{
    background: #fff;
    padding-top: 1.2rem;
}
.qiye-info2{
  margin-top: 2rem;
}
.qita{
    margin-top: 2rem;
    padding: 1.2rem;
    background: #fff;
    margin-bottom: 2.6rem;
}
.title2{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
}
.title3{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0 0 0.9rem 0;
}
.remark{
    border: 1px solid #E0E0E4;
    padding: 0.4rem 1rem!important;
}
::v-deep .van-field__label{
  width: 10rem!important;
}

.van-button{
  font-size: 1.8rem;
  font-weight: 400;
}
.van-cell{
  border-bottom: 1px solid #E0E0E4;
  padding: 2rem 0 1.6rem;
}
::v-deep .van-cell__title{
  width: 8.6rem !important;
  flex: none;
  margin-right: 1.2rem;
}
::v-deep .van-cell__value{
  text-align: left;
  color: #323233;
}

</style>